import { useNavigate } from 'react-router-dom'
/* -------------------------------------------------------- antd -- */
import { HomeOutlined } from '@ant-design/icons'
/* -------------------------------------------------------- Function -- */
import { getRedirect, hasPath } from '@com/react/router/utils'
/* -------------------------------------------------------- Declare -- */
const { $fn } = window
/**
 * 顶部菜单
 * @param {Array} 	data		# 菜单数据
 * @param {String}	rootPath	# 根目录，如： /main
 * @param {Event} 	onClick		# 点击菜单选项时触发
 * @return {Component} 菜单组件
 */
const Index = ({ data }) => {
	const navigate = useNavigate( )
	
	const onMenuClick = ({ children = [] })=>{
		navigate( getRedirect(children) )
	}
	
	return (
		<nav className='ex h lh fx tc nav-top-list'>
			{
				$fn.hasArray(data) && data.map((v,i)=>(
					<li key={i} className={`fxmc h rel cp tap ${ hasPath(v.path) ? 'active' : '' }` } style={{ width: 80 }} onClick={onMenuClick.bind(null, v)}>
						<div>
							<div className='h24'>{<HomeOutlined />}</div>
							<div className='f12'>{v.title}</div>
						</div>
						<div hidden={ !hasPath(v.path) } className='abs_lb w fxc' style={{height:2}}>
							<i className='bcm db h' style={{width:'80%'}}></i>
						</div>
					</li>
				))
			}
		</nav>
	)
}
export default Index